<%-- 
    Document   : dashoard-projet
    Created on : 29 févr. 2012, 01:51:47
    Author     : tidiane
--%>

<%@page import="com.teamreinforce.ejb.entities.Tache"%>
<%@page import="com.teamreinforce.ejb.entities.Etape"%>
<%@page import="com.teamreinforce.ejb.entities.Projet"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%!
    String titre;
    float realise;
    float restant;
    
    String[] sEtapes ; 
    float [] vEtapes;
%>
<% 
    Projet projet = (Projet) getServletContext().getAttribute("_projet");
    titre = projet.getTitre();
    realise = 0;
    int sum = 0;
    int netape = 0;
    int ntaches = 0;
    
    netape = projet.getEtapeList().size();
    
    sEtapes = new String [netape];
    vEtapes = new float[netape];
    
    int i = 0;
    
    for (Etape e : projet.getEtapeList()){
        sEtapes [i] = e.getLibelle();
        sum = 0;
        ntaches = e.getTacheList().size();
        for ( Tache t : e.getTacheList()) {
            sum += t.getAvancement();
        }
        
        if ( ntaches != 0){
            realise += sum / ntaches;
            vEtapes[i] = sum / ntaches;
        }else{
            realise += sum ;
            vEtapes[i] = sum;
        }
        i++;
    }
    if ( netape != 0)
        realise = realise / netape;
    restant = 100 - realise;
%>
<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
        <!-- BOOTSTRAP CSS FRAMEWORK IMPORT-->
        <link rel = "stylesheet" href ="libs/bootstrap/css/bootstrap.css"/>
        <link rel = "stylesheet" href ="libs/bootstrap/css/datepicker.css"/>
        <!-- The AJAX Code for project deletion here-->
        <script type = "text/javascript" src = "libs/jquery/jquery-1.7.1.js"></script>
        <script type = "text/javascript" src = "libs/bootstrap/js/bootstrap.js"></script>
        <script type = "text/javascript" src = "libs/bootstrap/js/bootstrap-datepicker.js"></script>
        <script type = "text/javascript" src = "media/js/custom.js"></script>
    <link rel = "icon" href = "media/images/favicon.ico"/>

    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'etape');
            data.addColumn('number', 'avancement');
            data.addRows([
                ['Réalisé', <%= realise %>],
                ['Reste à faire', <%= restant %>]
            ]);

            var options = {
            //title: 'Avancement [Projet : Projet A]'
            };

            var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data, options);
        }
    </script>
        <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Etape');
        data.addColumn('number', 'Avancement');

        data.addRows([
      <%
            int j = 0;
            String s = "";
            // Preprocessing the tabs
            int _netap = 0;
            
            for ( int k = 0; k < sEtapes.length; k++){
                if ( vEtapes[k] != 0.0) _netap++;
            }
            String [] _sEtapes = new String [_netap];
            float  [] _vEtapes = new float[_netap];
            for ( int k = 0; k < sEtapes.length; k++){
                if ( vEtapes[k] != 0.0) {
                    _sEtapes[j] = sEtapes[k];
                    _vEtapes[j] = vEtapes[k];
                    j++;
                }
            }
            
            sEtapes = _sEtapes;
            vEtapes = _vEtapes;
            
            float v = 0;
            if ( restant < 100.0){
            for ( j = 0; j < sEtapes.length - 1; j ++){
                s = sEtapes[j];
                v = vEtapes[j];
                if ( v != 0.0) {
       %>
                   ['<%= s %>', <%= v %>],
       <%
                }
            }
                s = sEtapes[j];
                v = vEtapes[j];
       %>
                   ['<%= s %>', <%= v %>]

        ]);
        <%
               }
       %>
        var options = {
          //title: 'Company Performance',
          vAxis: {title: 'Etapes',  titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
        chart.draw(data, options);
      }
    </script>
    <style type = "stylesheet">
        #chart_div {
            width: 500px;
            height: 900px;
        }
    </style>
  </head>
  <body>
      <div class ="container" >
          <div class ="hero-unit">
              <h2>
                  Teamreinforce - Les tableaux de bord
              </h2>
          </div>
          <div class="alert alert-success">
                <h3 class="alert-heading">Tableau de bord du projet :</h3>
                <span style ="font-size: 30px;"><%= titre %></span>
            </div>
          <div class="row">
                
                <div class="span5">
                    <h3 class = "page-header">
                        Avancement global
                    </h3>
                    <div id ="pie_chart"></div>
                </div>
                <%
                    if ( restant < 100.0) {
                %>
                <div class="span7">
                    <h3 class = "page-header">
                        Avancement des étapes
                    </h3>
                    <div id ="bar_chart"></div>
                </div>
                <%
                    }
                %>
                
              
            </div>
              <div class ="row">
                  
                    <div class="span12">
                        <h3 class ="page-header">
                            Voir le tableau de bord d'un projet 
                        </h3>
                    <div id="tableau-bord" >

                    <div class="modal-body" >
                        <form id ="tableaudebord" method = "GET" action = "tableaudebord" class="form-horizontal">
                            <fieldset>

                            <div class="control-group">
                                <label class="control-label" for="titre"> Projet </label>
                                <div class="controls">
                                    <select type="text" class="input-xlarge" id = "projet" name = "projet">
                                        <c:forEach var = "projet" items = "${projets}">
                                            <option value = "${projet.idProjet}"> ${projet.titre} </option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            </fieldset>
                        </form>
                        <div class ="modal-footer">
                            <input id = "show-dashboard" type ="button" class ="btn btn-success btn-large" value ="Afficher le tableau de bord"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>
